<template>
  <div class="screen-card">
    <aside class="prompt-info">
      温馨提示：请输入您的姓名、身份证号等信息验证微信实名后即可快捷查询。
    </aside>
    <article class="form-card">
      <van-form>
        <van-field
          v-model="idCard"
          required
          name="证件号码"
          label="证件号码"
          :colon="true"
          input-align="right"
          :rules="[{ required: true, message: '请填写证件号码' }]"
        />
        <van-field
          v-model="name"
          required
          name="姓名"
          label="姓名"
          :colon="true"
          input-align="right"
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          v-model="tel"
          required
          name="电话号码"
          label="电话号码"
          :colon="true"
          input-align="right"
          :rules="[{ required: true, message: '请填写电话号码' }]"
        />
        <van-field
          v-model="sms"
          required
          clearable
          label="短信验证码"
          :rules="[{ required: true, message: '请输入短信验证码' }]"
        >
          <template #button>
            <van-button
              size="small"
              type="info"
            >发送验证码</van-button>
          </template>
        </van-field>
        <section>
          <div style="display: flex; justifyContent: center;">
            <van-checkbox
              v-model="checked"
              class="agree-ment"
            >请同意<div
                @click="toAgreement()"
                style="color: rgb(21, 105, 255); display: inline-block;"
              >《用户授权协议》</div>
            </van-checkbox>
          </div>
        </section>
        <van-button
          round
          block
          type="info"
          native-type="submit"
          :disabled="checked ? false : true"
        >提交</van-button>
      </van-form>
    </article>
  </div>
</template>

<script>
export default {
  name: 'realAuthorization',
  data () {
    return {
      idCard: '',
      name: '',
      tel: '',
      sms: '',
      checked: false // 是否同意协议
    }
  },
  methods: {
    toAgreement () {
      this.$router.push({
        path: 'licenseAgreement'
      })
    }
  },
  mounted () {
    if (this.$route.params.checked) {
      this.checked = this.$route.params.checked
    }
  }
}
</script>

<style scoped lang="less">
.prompt-info {
  background-color: rgb(235, 243, 255);
  box-shadow: 0 0 37.5px #e8e8e8;
  border-radius: 5px;
  padding: 15px 20px;
  color: rgb(21, 105, 255);
  font-size: 16px;
}

.form-card {
  background-color: #fff;
  box-shadow: 0 0 37.5px #e8e8e8;
  border-radius: 15px;
  padding: 10px;
  margin: 10px 0;
}

.agree-ment {
  font-size: 16px;
  margin: 30px 0;
}
</style>
